<template>
  <div class="ly-input" :class="{
     'clearable':isClose
   }">
    <ly-icon class="pre-icon" v-if="preIcon" :name="preIcon"></ly-icon>
    <ly-icon class="suf-icon" v-if="sufIcon" :name="sufIcon"></ly-icon>
    <input :type="inputType"
      :placeholder="placeholder"
      :readonly="readonly"
      :disabled="disabled"
      :autofocus="autofocus"
      :value="value"
      @click="$emit('click',$event.target.value,$event)"
      @focus="$emit('focus', $event.target.value,$event)"
      @blur="$emit('blur', $event.target.value,$event)" 
      @change="$emit('change', $event.target.value,$event)"        
      @input="$emit('input', $event.target.value,$event)"    
    />
    <ly-icon class="clearicon" v-if="isClose"  name="close"></ly-icon>
  </div>
</template>
<script>
export default {
  name:'lyInput',
  props:{
    placeholder:{
      type:String,
      default:'请输入内容'
    },
    value: {
      type: String
    },
    readonly:{
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    preIcon:{
      type:String,
    },
    sufIcon:{
      type:String
    },
    clearable: {
      type: Boolean,
      default: false
    },
    isPassword:{
      type:Boolean,
      default:false
    }
  },
  computed:{
    inputType(){
      let res = 'text'
      this.isPassword && (res = 'password')
      return  res
    },
    isClose(){
      return this.clearable && this.value && !this.disabled && !this.readonly;
    }
  }
}
</script>
<style lang="scss">
  .ly-input{
    position: relative;
    display: inline-block;
    font-size: 14px;
    width: 100%;
    input{
      width: 100%;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #d9e1f1;
      box-sizing: border-box;
      color: #333;
      outline: none;
      padding: 8px 15px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      &:focus{
        border-color: #6772e4;
        outline: #d0d4ff;
      }
      &[disabled]{
        cursor: not-allowed;
        background-color: #f5f7fa;
      }
    }
    .pre-icon,
    .suf-icon,
    .clearicon {
      position: absolute;
      top:50%;
      transform: translateY(-50%);
      color: gray;
      cursor: pointer;
    }
    .pre-icon{
      left: 10px;
      & ~ input{
        padding-left: 30px;
      }
    }
    .suf-icon{
      right: 10px;
      & ~ input{
        padding-right: 30px;
      }
    }
    .clearicon {
      right: 10px;
      display: none;
      //覆盖在suffixicon上面
      z-index: 1;
      background: #fff;
    }
    &.clearable {
      // hover和focus的时候显示清空图标
      &:hover {
        .clearicon {
          display: inline;
        }
        input {
          padding-right: 30px;
        }
      }
      input:focus {
        padding-right: 30px;
        & ~ .clearicon {
          display: inline;
        }
      }
    }
  }
</style>